<template>
  <div class="main">
    <div class="top">
      <div class="top-left">
        <div class="item" :class="[dataForm.type == 1 ? 'item-active' : '']" @click="handleItem(1)">上传列表</div>
        <div class="item" :class="[dataForm.type == 2 ? 'item-active' : '']" @click="handleItem(2)">审核列表</div>
      </div>
      <div class="top-right">
        <div class="text">审核结果</div>
        <a-select placeholder="请选择" v-model="dataForm.applyStatus" style="width: 200px">
          <a-select-option value="1"> 待审核 </a-select-option>
          <a-select-option value="2"> 通过 </a-select-option>
          <a-select-option value="3"> 不通过 </a-select-option>
        </a-select>
        <div class="text">关键字</div>
        <a-input v-model="dataForm.keyword" style="width: 200px" placeholder="请输入电站名称/上传人" />
        <a-button type="primary" style="margin-right: 20px; margin-left: 40px" @click="onSearch">查询</a-button>
        <a-button class="cancel" @click="cancel">重置</a-button>
      </div>
    </div>
    <div>
      <a-table :columns="columns" :data-source="data" :pagination="paginationProps">
        <template slot="applyStatus" slot-scope="text, record">
          <span v-if="record.applyStatus == 1">待审核</span>
          <span v-else-if="record.applyStatus == 2">通过</span>
          <span v-else-if="record.applyStatus == 3">不通过</span>
        </template>
        <template slot="options" slot-scope="text, record">
          <a @click="handleSearch(record)">查看</a>
          <a
            style="margin-left: 24px"
            v-if="dataForm.type == 1 && record.applyStatus == 3"
            @click="handleResubmit(record)"
            >重新提交</a
          >
        </template>
      </a-table>
    </div>
    <MyModal
      :width="dataSource.panelType > 99 ? 1500 : 1000"
      :visible="visible"
      :title="'查看'"
      @handleCancel="handleCancel"
    >
      <template #dialogBox>
        <Examine :isLook="isLook" :dataSource="dataSource" @cancel="handleCancel" />
      </template>
    </MyModal>
  </div>
</template>

<script>
import MyModal from '@/components/MyModal';
import Examine from './Examine';
import { getDamInfoRecord, getDamInfoRecordById } from '@/api/user.js';

export default {
  components: { MyModal, Examine },
  props: {
    userRole: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      visible: false,
      activeNum: 1,
      dataForm: {
        applyStatus: undefined,
        keyword: '',
        type: 1
      },
      data: [],
      columns: [
        {
          title: '序号',
          customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: '电站名称',
          dataIndex: 'stationName',
          key: 'stationName'
        },
        {
          title: '上传人',
          dataIndex: 'createUserName',
          key: 'createUserName'
        },
        {
          title: '上传时间',
          dataIndex: 'createTime',
          key: 'createTime'
        },
        {
          title: '审核结果',
          key: 'applyStatus',
          dataIndex: 'applyStatus',
          scopedSlots: { customRender: 'applyStatus' }
        },
        {
          title: '操作',
          dataIndex: 'options',
          scopedSlots: { customRender: 'options' }
        }
      ],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dataSource: {},
      isLook: false
    };
  },
  computed: {
    // 分页参数
    paginationProps() {
      const _this = this;
      return {
        showQuickJumper: true, // 是否显示快速跳转
        showSizeChanger: true, // 是否显示修改页面展示条数
        pageSizeOptions: ['10', '20', '40', '80', '100'], //可切换每叶数据条数
        current: _this.currentPage, // 当前第几页
        pageSize: _this.pageSize, // 每页显示条数
        total: _this.total, // 数据总数
        showTotal: (total, range) => {
          return '共' + total + '条';
        },
        onChange(page, pageSize) {
          // 切换页码
          _this.currentPage = page;
          _this.initData();
        },
        onShowSizeChange(current, size) {
          // 切换每页显示条数
          _this.pageSize = size;
          _this.initData();
        }
      };
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      const params = {
        ps: this.pageSize,
        pn: this.currentPage,
        ...this.dataForm
      };
      getDamInfoRecord(params).then(res => {
        this.data = res.data.records;
        this.total = res.data.total;
      });
    },
    cancel() {
      this.dataForm.applyStatus = undefined;
      this.dataForm.keyword = '';
      this.initData();
    },
    onSearch() {
      this.initData();
    },
    handleCancel(type) {
      if (type) {
        this.initData();
      }
      this.visible = false;
    },
    handleItem(type) {
      if (type == 2 && this.userRole != 2 && this.userRole != 3) {
        return this.$message.error('当前用户没有权限');
      }
      this.dataForm.type = type;
      this.initData();
    },
    handleSearch(record) {
      if (this.dataForm.type == 1) {
        // 上传列表
        this.isLook = true;
      } else {
        if (record.applyStatus != 1) {
          this.isLook = true;
        } else {
          this.isLook = false;
        }
      }
      getDamInfoRecordById(record.id).then(res => {
        this.dataSource = res.data;
        this.visible = true;
      });
    },
    handleResubmit(record) {
      return this.$message.info('暂不支持，请移动到工程数据库重新提交');
      this.$store.dispatch('user/setListActive', 2);
      if (record.isUpdate != 1) {
        this.$router.push({
          path: '/record'
        });
      } else {
        this.$router.push({
          path: '/record',
          query: {
            panelType: record.panelType,
            damId: record.damId
          }
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  color: #fff;
  .top {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .top-left {
      display: flex;
      background-color: rgba(22, 102, 240, 0.2);
      padding: 4px;

      .item {
        padding: 10px 40px;
        border-radius: 4px;
      }
      .item-active {
        background-color: #1666f0;
      }
    }
    .top-right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .text {
        margin: 0 12px 0 24px;
      }
      .cancel {
        color: #fff;
        background: rgba(22, 102, 240, 0.2);
        border-color: rgba(22, 102, 240, 0.2);
      }
    }
  }
}
.main ::v-deep .ant-table-body {
  max-height: calc(100vh - 320px);
  // min-height: calc(100vh - 320px);
  overflow-y: auto;
}
.main ::v-deep .ant-table-placeholder {
  background: rgba(22, 102, 240, 0.2);
}
.main ::v-deep .ant-empty-normal {
  color: #fff;
}
</style>
